import { addPage, AutoloadPage } from '@hydrooj/ui-default';

addPage(new AutoloadPage('sanhai_redirect', () => {
    const countdownEl = document.getElementById('countdown');
    if (!countdownEl) return;

    const redirectUrl = document.querySelector('.btn-primary')?.getAttribute('href');
    if (!redirectUrl) return;

    let seconds = 5;
    countdownEl.textContent = seconds;

    const interval = setInterval(() => {
        seconds--;
        countdownEl.textContent = seconds;

        if (seconds <= 0) {
            clearInterval(interval);
            window.location.href = redirectUrl;
        }
    }, 1000);

    document.querySelector('.btn-primary')?.addEventListener('click', () => {
        clearInterval(interval);
    });

    const progressBar = document.createElement('div');
    progressBar.className = 'progress mt-3';
    progressBar.style.height = '5px';

    const progressInner = document.createElement('div');
    progressInner.className = 'progress-bar progress-bar-striped progress-bar-animated bg-primary';
    progressInner.style.width = '100%';
    progressInner.setAttribute('role', 'progressbar');

    progressBar.appendChild(progressInner);
    document.querySelector('.redirect-container').appendChild(progressBar);

    let progress = 100;
    const progressInterval = setInterval(() => {
        progress -= 20;
        progressInner.style.width = `${progress}%`;

        if (progress <= 0) {
            clearInterval(progressInterval);
        }
    }, 1000);
}));

export default {};
